<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>CSS双飞翼布局</title>
    <style>
    		*{margin:0;padding:0;}
    	.column{float: left;padding-bottom: 9999px;margin-bottom: -9999px;}
    	.wrap-left{width: 300px;background: #0000FF;margin-left:-100%;}
    	.wrap-right{width:200px;background: #000;color:#fff;margin-left: -200px;}
    	#wrapcenter{margin-left: 300px;margin-right: 200px;background: red;color:#fff;}
    	.wrap-center{background: #6cf;width:100%;}
    	.wrap{overflow:hidden;}
  	</style>
</head>
<body>

  <div class="wrap">
  	   <div class="column wrap-center">
	  	   	<div id="wrapcenter">
	  	   		 <p>中间的内容</p>
	  	   		 <p>中间的内容</p>
	  	   		 <p>中间的内容</p>
	  	   		 <p>中间的内容</p>
	  	   		 <p>中间的内容</p>
	  	   	</div>
  	   </div>
  	   <div class="column wrap-left">左边内容</div>
  	   <div class="column wrap-right">右边内容</div>
  </div>

</body>
</html>